<template>
  <div class="congestion-charts">
    <div id="congestion-charts"></div>
    <div class="congestion-charts-right">
      <div class="congestion-item" v-for="(item, index) in list" :key="index">
        <div class="congestion-top">
          <div style="display: flex; align-items: center"
            ><div class="sport" :style="{ backgroundColor: item.itemStyle.color }"> </div>
            {{ item.name }}</div
          >
          <div class="symbol"> {{ ((Number(item.value) / count) * 100).toFixed(1) }}%</div>
        </div>
      </div>
    </div>
    <div class="flooer">
      <div class="flooer-item">
        <div class="label">现状道路长度</div>
        <div>2468.3 km</div>
      </div>
      <div class="flooer-item">
        <div class="label">规划外道路长度</div>
        <div>589.9 km</div>
      </div>
      <div class="flooer-item">
        <div class="label">现状路网密度</div>
        <div>3.4 km/km²</div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, inject } from 'vue';

export default defineComponent({
  setup() {
    const echarts = inject('echarts');
    const state = reactive({
      list: [],
      count: 0,
      lastchart: null,
      mTime: null,
      index: -1,
      labelStyle: [],
      colorList: ['#FFFF00', '#F6CD62', '#ABF7D9', '#1853A2', '#2199A0', 'rgba(250,250,250,0.3)'],
      colorList2: [
        'rgba(255,255,0,.3)',
        'rgba(246,205,98,.3)',
        'rgba(171,247,217,.3)',
        'rgba(24,83,162,.3)',
        'rgba(46,220,230,.3)',
        'rgba(250,250,250,0.3)',
      ],
      placeHolderStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    });
    const setData = (data) => {
      state.list = [
        {
          name: '按规划形成道路占比',
          value: 52.8,
          itemStyle: {
            color: state.colorList[0],
          },
        },
        {
          name: '规划与建设不一致道路占比',
          value: 22.7,
          itemStyle: {
            color: state.colorList[1],
          },
        },
        {
          name: '规划外道路占比',
          value: 24.5,
          itemStyle: {
            color: state.colorList[2],
          },
        },
      ];
      state.count = 100;
      // if (data?.length) {
      //   data.map((i, index) => {
      //     state.count += parseFloat(i.v);
      //     state.list.push({
      //       name: i.k,
      //       value: Number(i.v),
      //       itemStyle: {
      //         color: state.colorList[index],
      //       },
      //     });
      //   });
      // }
      setOptions();
    };
    const setOptions = () => {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        state.lastchart != null &&
        state.lastchart != '' &&
        state.lastchart != undefined
      ) {
        state.lastchart.dispose();
      }
      state.lastchart = echarts.init(document.getElementById('congestion-charts'));
      let data = [];
      for (let i = 0; i < state.list.length; i++) {
        data.push(
          {
            data: state.list[i].value,
            value: 20,
            percentage: ((Number(state.list[i].value) / state.count) * 100).toFixed(1),
            name: state.list[i].name,
            itemStyle: {
              normal: {
                color: state.colorList[i],
                borderWidth: 10,
                borderColor: state.colorList2[i],
              },
            },
          },
          {
            value: 8,
            name: '',
            itemStyle: state.placeHolderStyle,
          },
        );
      }
      data.push({
        value: 40,
        name: '',
        itemStyle: state.placeHolderStyle,
      });
      var seriesObj = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [30, 60],
          hoverAnimation: false,
          startAngle: -30,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inner',
                fontSize: '0.6vw',
                lineHeight: 15,
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < state.list.length; i++) {
                    total += state.list[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    // return params.name + '\n' + params.data.data;
                    if (params.name.length > 4) {
                      return params.name.slice(0, 3) + '...';
                    } else {
                      return params.name;
                    }
                  } else {
                    return '';
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 60,
                show: false,
              },
            },
          },
          data: data,
        },
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [30, 60],
          hoverAnimation: false,
          startAngle: -30,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                fontSize: '0.6vw',
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < state.list.length; i++) {
                    total += state.list[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.data.data;
                  } else {
                    return '';
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 60,
                show: false,
              },
            },
          },
          data: data,
        },
      ];
      let option = {
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(15, 168, 207, 0.9)',
          borderColor: 'white',
          textStyle: {
            color: 'white', //设置文字颜色
          },
          formatter: (params) => {
            if (params.name !== '') {
              return params.name + ':<br />' + params.data.percentage + '%';
            }
          },
        },
        series: seriesObj,
        graphic: [
          {
            type: 'group',
            left: 'center',
            top: 'middle',
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 8,
                style: {
                  fill: '#fff',
                  text: ['规划建设'],
                  font: '0.65vw Microsoft YaHei',
                },
              },
              {
                type: 'text',
                z: 180,
                left: 'center',
                top: 25,
                style: {
                  fill: '#fff',
                  text: ['情况统计'],
                  font: '0.65vw Microsoft YaHei',
                },
              },
            ],
          },
        ],
      };

      state.lastchart.setOption(option);
    };
    return {
      ...toRefs(state),
      setData,
    };
  },
});
</script>
<style lang="less" scoped>
.congestion-charts {
  height: 33vh;
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  background: url('@/assets/images/home/case-1.png') no-repeat;
  background-size: 100% 100%;
  #congestion-charts {
    width: 45%;
    height: 18vh;
    margin-top: 5vh;
    // scale: 0.8;
  }
  .congestion-charts-right {
    flex: 1;
    flex-shrink: 0;
    padding-top: 2.8416vw;
    padding-left: 0.5208vw;
  }
  .congestion-item {
    color: #b4ffff;
    font-size: 0.7vw;
    margin: 0.5vw 0;
    text-align: left;
    .congestion-top {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      font-weight: 600;
    }
    .sport {
      width: 0.8vw;
      height: 0.8vw;
      border-radius: 50%;
      border: 1px solid white;
      margin-right: 4px;
    }
    .label {
      color: #fff;
      font-size: 0.83333vw;
      font-weight: 400;
      padding-left: 1vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 8.8125vw;
      font-weight: bold;
      text-shadow: #52a4d2 1px 0 0, #52a4d2 0 1px 0, #52a4d2 -1px 0 0, #52a4d2 0 -1px 0;
    }
    .symbol {
      font-size: 0.83333vw;
      font-weight: 600;
      color: white;
    }
    i {
      // text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
      font-style: normal;
      opacity: 0.85;
    }
  }
  .flooer {
    display: flex;
    width: 100%;
    .flooer-item {
      flex-grow: 1;
      text-align: center;
      padding-right: -0.8vw;
    }
  }
}
</style>
